//
//  UseAlignment.swift
//  learn-ios
//
//  Created by Dong on 2022/4/5.
//

import SwiftUI

struct UseAlignment: View {
    let columns: [GridItem] = Array(repeating: .init(.flexible(minimum: 100, maximum: 100)), count: 3)
    var body: some View {
        // frame方法中aligment参数用于设置子元素对齐方式
        //

        VStack {
            LazyVGrid(columns: columns,spacing: 50) {
                Group {
                    // 右上
                    VStack {
                        Rectangle()
                            .frame(width: 20, height: 20, alignment: .center)
                    }
                    .frame(width: 50, height: 50, alignment: .topLeading)
                    .border(.pink)

                    // 上
                    VStack {
                        Rectangle()
                            .frame(width: 20, height: 20, alignment: .center)
                    }
                    .frame(width: 50, height: 50, alignment: .top)
                    .border(.pink)

                    // 左上
                    VStack {
                        Rectangle()
                            .frame(width: 20, height: 20, alignment: .center)
                    }
                    .frame(width: 50, height: 50, alignment: .topTrailing)
                    .border(.pink)
                }

                Group {
                    // 右
                    VStack {
                        Rectangle()
                            .frame(width: 20, height: 20, alignment: .leading)
                    }
                    .frame(width: 50, height: 50, alignment: .leading)
                    .border(.pink)

                    // 中
                    VStack {
                        Rectangle()
                            .frame(width: 20, height: 20, alignment: .center)
                    }
                    .frame(width: 50, height: 50, alignment: .center)
                    .border(.pink)

                    // 左
                    VStack {
                        Rectangle()
                            .frame(width: 20, height: 20, alignment: .center)
                    }
                    .frame(width: 50, height: 50, alignment: .trailing)
                    .border(.pink)
                }
                
                Group {
                    // 右下
                    VStack {
                        Rectangle()
                            .frame(width: 20, height: 20, alignment: .leading)
                    }
                    .frame(width: 50, height: 50, alignment: .bottomLeading)
                    .border(.pink)

                    // 中
                    VStack {
                        Rectangle()
                            .frame(width: 20, height: 20, alignment: .center)
                    }
                    .frame(width: 50, height: 50, alignment: .bottom)
                    .border(.pink)

                    // 左
                    VStack {
                        Rectangle()
                            .frame(width: 20, height: 20, alignment: .center)
                    }
                    .frame(width: 50, height: 50, alignment: .bottomTrailing)
                    .border(.pink)
                }
            }
        }
        .padding()
    }
}

struct UseAlignment_Previews: PreviewProvider {
    static var previews: some View {
        UseAlignment()
    }
}
